<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>

<head>

    <title>Choose Ad Category</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="author" content=""/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <link rel="stylesheet" href="css/main.css"/>
    <link rel="Stylesheet" href="css/ui.selectmenu.css" type="text/css"/>
    <link rel="Stylesheet" href="css/jquery.jscrollpane.css" type="text/css"/>


    <link href="favicon.ico" rel="shortcut icon"/>
    <link href="apple-icon.png" rel="apple-touch-icon"/>

    <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/ui.selectmenu.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

</head>

<body>
<f:view>
<f:loadBundle basename="ResourceBundle" var="bundle"/>
<h:form id="chooseCategoryFullForm">
<div class="android-wrap">
<div id="wrapper">
<div id="header">
    <h1 class="title">Choose Ad Category</h1>
    <ul class="app-controls">
        <li>
                <%--<a href="#" class="appc-back">About</a>--%>
            <h:commandLink action="#{appBean.menu}" value="Back" styleClass="appc-back"/>

        </li>
        <li><a href="#" class="appc-logout">Logout</a></li>
    </ul>
</div>
<div id="content" class="expand">
<div class="scroll-pane">
<ul class="category-list-full">
<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview1.png" width="44" height="44">
        </dd>
        <dt>Auto</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox1}"
                                         valueChangeListener="#{appBean.chooseCategory1}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>
<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview2.png" width="44" height="44">
        </dd>
        <dt>Restaurants</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox2}"
                                         valueChangeListener="#{appBean.chooseCategory2}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>
<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Luxury</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox3}"
                                         valueChangeListener="#{appBean.chooseCategory3}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview3.png" width="44" height="44">
        </dd>
        <dt>Sport and fitness</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox4}"
                                         valueChangeListener="#{appBean.chooseCategory4}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview4.png" width="44" height="44">
        </dd>
        <dt> Loans and finance</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox5}"
                                         valueChangeListener="#{appBean.chooseCategory5}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview5.png" width="44" height="44">
        </dd>
        <dt>Realty</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox6}"
                                         valueChangeListener="#{appBean.chooseCategory6}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt> Notary and
            <br>legal services</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox7}"
                                         valueChangeListener="#{appBean.chooseCategory7}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Jewelry</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox8}"
                                         valueChangeListener="#{appBean.chooseCategory8}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Accessories</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox9}"
                                         valueChangeListener="#{appBean.chooseCategory9}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Hotels and resorts</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox10}"
                                         valueChangeListener="#{appBean.chooseCategory10}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Health care</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox11}"
                                         valueChangeListener="#{appBean.chooseCategory11}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt>Medical services</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox12}"
                                         valueChangeListener="#{appBean.chooseCategory12}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>

<li>
    <dl>
        <dd class="preview">
            <img src="i/src/preview.png" width="44" height="44">
        </dd>
        <dt> High tech</dt>
        <dd class="cl-check">
            <div class="f-checkbox">
                <h:selectBooleanCheckbox value="#{appBean.clickedCheckbox13}"
                                         valueChangeListener="#{appBean.chooseCategory13}"
                                         onchange="this.form.submit( )"/>
            </div>
        </dd>
    </dl>
</li>


</ul>
</div>
</div>
<div id="control-panel">

    <ul>
        <li class="cp-btn checka-btn icon-only">
                <%--<a href="#">Check all</a>--%>
            <h:commandLink value="Check all" actionListener="#{appBean.checkAll}"/>
        </li>
        <li class="cp-btn unchecka-btn icon-only">
                <%--<a href="#">Uncheck all</a>--%>
            <h:commandLink value="Uncheck all" actionListener="#{appBean.uncheckAll}"/>

        </li>
        <li class="cp-btn undo-btn icon-only">

                <%--<a href="#">Undo</a>--%>
            <h:commandLink value="Undo" actionListener="#{appBean.uncheckLastCheckbox}"/>
        </li>
        <li class="cp-btn edit-btn icon-only">
            <a href="#">Back step</a>
        </li>
        <li class="cp-btn ok-btn">
                <%--<a href="#">Ok</a>--%>
            <h:commandLink action="#{appBean.chooseCategories}" value="Ok"/>

        </li>
    </ul>
</div>
</div>
    <%--<a href="#" class="android-control back-btn">Back</a>--%>
<h:commandLink action="#{appBean.menu}" value="Back" styleClass="android-control back-btn"/>

</div>
</h:form>
</f:view>
</body>
</html>